<template>
  <div class="app-header">
    <div class="header-left">
      <el-button
        class="sidebar-toggle"
        :icon="appStore.sidebarCollapsed ? Expand : Fold"
        @click="appStore.toggleSidebar"
      />
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="currentRoute !== '/'">
            {{ getRouteTitle(currentRoute) }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <div class="header-right">
      <div class="header-actions">
        <theme-switcher />
        
        <el-tooltip content="消息通知" placement="bottom">
          <el-badge :value="unreadCount" class="notification-badge" type="danger">
            <el-button class="action-button" :icon="Bell" @click="showNotifications" />
          </el-badge>
        </el-tooltip>
        
        <el-tooltip content="搜索" placement="bottom">
          <el-button class="action-button" :icon="Search" @click="showSearch" />
        </el-tooltip>
      </div>
      
      <el-dropdown trigger="click" @command="handleCommand">
        <div class="user-info">
          <div class="user-avatar">
            <el-avatar :size="36" :src="userInfo.avatar" />
            <div class="status-dot"></div>
          </div>
          <div class="user-details" v-if="!isMobile">
            <span class="username">{{ userInfo.username }}</span>
            <span class="user-role" v-if="primaryRoleName">{{ primaryRoleName }}</span>
          </div>
          <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu class="user-dropdown">
            <el-dropdown-item command="profile">
              <el-icon><User /></el-icon>个人信息
            </el-dropdown-item>
            <el-dropdown-item command="settings">
              <el-icon><Setting /></el-icon>设置
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <el-icon><SwitchButton /></el-icon>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { 
  Expand, 
  Fold, 
  Bell, 
  User, 
  Setting, 
  SwitchButton,
  Search,
  ArrowDown
} from '@element-plus/icons-vue'
import { useAppStore } from '../store/app'
import { useUserStore } from '../store/user'
import { useUserProfile } from '../composables/useUserProfile'
import { ElMessage, ElMessageBox } from 'element-plus'
import ThemeSwitcher from './ThemeSwitcher.vue'

const route = useRoute()
const router = useRouter()
const appStore = useAppStore()
const userStore = useUserStore()
const { logout: logoutUser } = useUserProfile()

// 当前路由
const currentRoute = computed(() => route.path)

const userInfo = computed(() => userStore.userInfo)

// 获取主要角色名称
const primaryRoleName = computed(() => {
  if (userInfo.value.roleObjects && userInfo.value.roleObjects.length > 0) {
    return userInfo.value.roleObjects[0].name
  }
  return ''
})

// 未读消息数量
const unreadCount = ref(5)

// 是否是移动设备
const isMobile = ref(window.innerWidth < 768)

// 获取路由标题
const getRouteTitle = (path: string) => {
  if (path.startsWith('/dashboard')) {
    return '仪表板'
  } else if (path.startsWith('/app1')) {
    return '全域管理'
  } else if (path.startsWith('/app2')) {
    return '应用二'
  } else if (path.startsWith('/about')) {
    return '关于'
  } else if (path.startsWith('/profile')) {
    return '个人信息'
  }
  return '未知页面'
}

// 显示通知
const showNotifications = () => {
  ElMessage({
    message: '消息中心功能正在开发中',
    type: 'info'
  })
}

// 显示搜索
const showSearch = () => {
  ElMessage({
    message: '全局搜索功能正在开发中',
    type: 'info'
  })
}

// 处理下拉菜单命令
const handleCommand = (command: string) => {
  if (command === 'logout') {
    ElMessageBox.confirm('确定要退出登录吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      // 使用 useUserProfile 的 logout 方法，确保清除所有数据（包括 Token 和权限缓存）
      await logoutUser()
      
      router.push('/login')
      ElMessage({
        type: 'success',
        message: '退出登录成功'
      })
    }).catch(() => {})
  } else if (command === 'profile') {
    router.push('/profile')
  } else if (command === 'settings') {
    ElMessage('设置页面正在开发中')
  }
}
</script>

<style scoped>
.app-header {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.header-left {
  display: flex;
  align-items: center;
}

.sidebar-toggle {
  font-size: 20px;
  background: transparent;
  border: none;
  padding: 8px;
  color: var(--text-color);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar-toggle:hover {
  color: var(--primary-color);
  background-color: rgba(106, 44, 112, 0.05);
}

.breadcrumb {
  margin-left: 20px;
  font-size: 14px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-button {
  background: transparent;
  border: none;
  padding: 8px;
  font-size: 18px;
  color: var(--text-color-secondary);
  transition: all var(--transition-fast);
  border-radius: 8px;
}

.action-button:hover {
  color: var(--primary-color);
  background-color: rgba(106, 44, 112, 0.05);
}

.notification-badge :deep(.el-badge__content) {
  border: none;
  font-weight: normal;
  transform: scale(0.85);
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 50px;
  transition: all var(--transition-fast);
  background: transparent;
}

.user-info:hover {
  background-color: rgba(106, 44, 112, 0.05);
}

.user-avatar {
  position: relative;
}

.status-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--accent-light);
  border-radius: 50%;
  border: 2px solid #fff;
  bottom: 0;
  right: 0;
}

.user-details {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}

.user-role {
  font-size: 12px;
  color: var(--text-color-secondary);
}

.dropdown-icon {
  margin-left: 4px;
  font-size: 12px;
  color: var(--text-color-secondary);
  transition: transform var(--transition-fast);
}

.user-info:hover .dropdown-icon {
  transform: rotate(180deg);
}

.user-dropdown :deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  padding: 8px 16px;
}

.user-dropdown :deep(.el-dropdown-menu__item i) {
  margin-right: 8px;
  font-size: 16px;
}
</style> 